<template>
  <div class="switchzj">
    <div class="nav">
      <div class="tab" :class="currentView=='prince' ? 'active':''" @click="toggleTab('prince')"><a>小王子</a></div>
      <div class="tab" :class="currentView=='rose' ? 'active':''" @click="toggleTab('rose')"><a>小玫瑰</a></div>
      <div class="tab" :class="currentView=='fox' ? 'active':''" @click="toggleTab('fox')"><a>小狐狸</a></div>
    </div>
    <div class="box">
      <keep-alive>
        <component :is="currentView">
          <!-- 非活动组件将被缓存！ -->
        </component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import prince from "./prince"
  import rose from "./rose"
  import fox from "./fox"
  // 定义全局指令
  /*Vue.directive('img',{
    inserted:function(el, binding){
      var color = Math.floor(Math.random()*1000000);
      el.style.backgroundColor = "#" + color;
      var img = new Image();
      img.src = binding.value; //获得传给指令的值
      img.onload = function(){
        el.style.backgroundImage = 'url(' + binding.value + ')';
      }
    }
  })*/

  export default {
    name: "switchzj",
    
    data(){
      return{
        currentView:"prince"
      }
    },
    methods:{
      toggleTab(tab){
        this.currentView = tab;
      }
    },
    components: {
      "prince":prince,
      "rose":rose,
      "fox":fox
    }
  }
</script>
<style scoped>
  .switchzj .nav{
    display: table;
    margin: 12px auto;
  }
  .switchzj .nav .tab{
    width: 90px;
    height: 32px;
    border: 1px solid #d6d6d6;
    font-size: 14px;
    color: #333;
    text-align: center;
    line-height: 32px;
    float: left;
    margin: 0 6px;
    border-radius: 6px;
    cursor: pointer;
  }
  .box{
    width: 100%;
    margin: 12px auto;
  }
  .switchzj .nav .active{
    border-color: blue;
    color: blue
  }
</style>